<template>
    <div class="bigScreen">
        <div class="toptitle">
            <div>
                <!-- 2020.11.30 星期一 15:50:03 -->
                <span class="time" id="time">
                    <span class="date">{{ nowTime }}</span> &nbsp;
                    <span class="hour">{{time.hour}}</span>
                    <a class="split">:</a>
                    <span class="minitus">{{time.minitus}}</span>
                    <a class="split">:</a>
                    <span class="seconds">{{time.seconds}}</span>
                </span>
            </div>
            <div class="title">
                噪声污染类案公益诉讼检察监督模型驾驶舱
            </div>
            <div>
                <!-- {{weatherdata}} -->
                <!-- 温度{{weatherdata.temperature}}℃ 天气：{{weatherdata.weather}} 湿度：{{weatherdata.humidity}}% -->
            </div>
        </div>
        <div class="contentBox">
            <div class="top">
                <div class="left">
                    <div class="ltopBox">
                        <dv-border-box-12 class="box">
                            <div class="titlemod vh-cb">
                                <div> 噪声占比</div>
                                <!-- <div class="titleright">单位（件）</div> -->
                            </div>
                            <div class="echart" id="contentchart" :style="'width:100%;height:90%'"></div>

                        </dv-border-box-12>
                    </div>
                    <div class="lbottomBox">
                        <dv-border-box-12 class="box">
                            <div class="titlemod vh-cb">噪声线索</div>
                            <div class="bottomBox">
                                <div class="item vh-cb" v-for="(item,index) in  contentData" :key="index">
                                    <!-- <img src="../../assets/top1.png" alt=""> -->
                                    <div class="itemtitle">{{index}}</div>
                                    <div class="scheduleBox">
                                        <div class="schedule" :style="'width:'+(item/contentAllNum*100).toFixed(2)+'%'"></div>
                                    </div>
                                    <div class="num">{{item}}件</div>
                                </div>
                            </div>
                        </dv-border-box-12>
                    </div>
                </div>
                <div id="map" class="map"></div>
                <div class="right">
                    <dv-border-box-12 style="height:32%">
                        <div class="titlemod vh-cb">噪声数量统计
                            <!-- <a-select class="search-select" v-model="areaName" placeholder="请选择" style="width: 320px" allowClear
                                >
                                <a-select-option v-for="(item,index) in areaList" :key="index" :value="index" :title="item">
                                    {{item.name}}
                                </a-select-option>
                            </a-select> -->

                            <!-- <el-select clearable v-model="areaName" size='mini' @change="changeAreaName">
                                <el-option v-for="(item,index) in areaList" :key="index" :value="index">{{item.name}}</el-option>
                            </el-select> -->

                            <el-select v-model="areaName" placeholder="请选择" size='mini' @change="changeAreaName">
                                <el-option v-for="dict in dict.type.acceptance_area" :key="dict.label" :label="dict.label"
                                    :value="dict.label"></el-option>
                            </el-select>
                        </div>
                        <div class="echart" id="addresschart" :style="'width:100%;height:90%'"></div>

                    </dv-border-box-12>
                    <dv-border-box-12 style="height:32%">
                        <div class="titlemod vh-cb">事发地检察院</div>

                        <div class="echart" id="numchart" :style="'width:100%;height:90%'"></div>
                    </dv-border-box-12>
                    <dv-border-box-12 style="height:32%">
                        <div class="titlemod vh-cb">噪声报警时间
                            <el-date-picker v-model="timePick" size='mini' type="month" placeholder="选择月" @change='changeTimePick'>
                            </el-date-picker>
                        </div>
                        <div class="echart" id="timechart" :style="'width:100%;height:90%'"></div>

                    </dv-border-box-12>
                </div>
            </div>
        </div>
    </div>
</template>

<script> 
import baotou from './baotou.json'
import { parseTime } from '../../utils/ruoyi'
import { areaCount, timeCount, managementCount, contentCount, addressCount } from "@/api/bigScreen";
export default {
    dicts: ['acceptance_area', 'type_appeal'],
    name: 'map',
    data() {
        return {
            // option 也可以在这里定义
            listData: [
                // {zd1: '一号仓库',zd2: '1-东-1',zd3: '安置类',zd4: '棉帐篷',zd5: 'Wp2022000001',zd6: '2020-4-20',zd7: '2025-6-30',zd8: '2025-6-25',zd9: '2020-5-20',zd11: '1000',zd12: '200'},
                ['一号仓库', '1-东-1', '防寒类', '棉手套', 'Wp2022000012', '2020-4-20', '2025-6-30', '2025-6-25', '入库', '2020-5-20', '10000', '9100'],
                ['三号仓库', '2-东-1', '防寒类', '棉褥', 'Wp2022000010', '2020-4-20', '2025-6-30', '2025-6-25', '出库', '2020-5-20', '3470', '2265'],
                ['二号仓库', '1-东-2', '防寒类', '棉褥', 'Wp2022000010', '2020-4-20', '2025-6-30', '2025-6-25', '入库', '2020-5-20', '3000', '2265'],
                ['二号仓库', '2-东-3', '防寒类', '电暖气', 'Wp2022000014', '2020-4-20', '2025-6-30', '2025-6-25', '入库', '2020-5-20', '2200', '1330'],
                ['二号仓库', '1-西-1', '防寒类', '棉大衣', 'Wp2022000011', '2020-4-20', '2025-6-30', '2025-6-25', '出库', '2020-5-20', '3650', '5120'],
                ['三号仓库', '1-东-3', '防寒类', '棉被', 'Wp2022000009', '2020-4-20', '2025-6-30', '2025-6-25', '出库', '2020-5-20', '3470', '6266'],
                ['一号仓库', '1-中-1', '防寒类', '棉大衣', 'Wp2022000011', '2020-4-20', '2025-6-30', '2025-6-25', '入库', '2020-5-20', '7000', '5120'],
                ['三号仓库', '1-西-1', '安置类', '折叠床', 'Wp2022000005', '2020-4-20', '2025-6-30', '2025-6-25', '出库', '2020-5-20', '2114', '4152'],
            ], //数据
            totalHeight: 0, //内容的高度
            openAnim: true, //是否开启滚动效果 true 开  false关
            timer: 40, //滚动步数  值越大滚动越快
            rowup: {}, //设置动画效果
            conFontColor: "rgba(0, 55, 123, 0.2)",
            xData: ["遇水膨\n胀袋", "棉被", "折叠床", "棉褥", "雨衣", "雨鞋", "雨披", "棉大衣", "竹板折\n叠床", "无磁不锈\n钢快餐杯"], //横坐标
            yData: [20000, 9736, 5269, 2735, 2040, 2040, 2000, 1700, 1536, 1400], //数据
            myChartStyle: { float: "left", width: "100%", height: "20vh" }, //图表样式
            weatherdata: {},
            time: {
                hour: "",
                minitus: "",
                seconds: ""
            },
            nowTime: "",
            week: [
                "星期天",
                "星期一",
                "星期二",
                "星期三",
                "星期四",
                "星期五",
                "星期六"
            ],
            areaList: [],
            contentData: [],
            contentAllNum: 0,
            areaName: null,
            timePick: null
        }
    },
    mounted() {
        let that = this
        this.dateTime();
        this.mapInit();
        // this.getDynamic();


        this.contentCountM()
        this.managementCountM()
        this.timeCountM()
        this.addressCountM()

    },
    methods: {
        // 
        changeAreaName() {
            this.addressCountM()
        },
        // 
        changeTimePick() {
            this.timeCountM()

        },
        // 噪声占比
        managementCountM() {
            managementCount().then(res => {
                let dataList = []
                let legendList = []

                for (var i in res.data) {
                    dataList.push({
                        name: res.data[i].name,
                        value: res.data[i].count
                    })
                    legendList.push(res.data[i].name)
                }
                // 基本柱状图
                const option = {
                    color: ['#2edfa3', '#bce672', '#ff4777', '#70f3ff', '#4b5cc4', '#f47983', '#8d4bbb', '#6635EF', '#FFAFDA'],
                    tooltip: {
                        trigger: 'item',
                        formatter: "{a} <br/>{b}: {c} ({d}%)"
                    },
                    legend: {
                        orient: 'horizontal',
                        icon: 'circle',
                        top: 20,
                        left: 'center',
                        // left: '5%',
                        // x: 'left',
                        textStyle: {
                            color: '#fff'
                        },
                        data: legendList
                    },
                    series: [{
                        name: '噪声占比',
                        type: 'pie',
                        selectedMode: 'single',
                        radius: [0, '45%'],
                        center: ['50%', '60%'],
                        label: {
                            normal: {
                                show: false,
                                position: 'inner',
                                formatter: '{d}%',
                                textStyle: {
                                    color: '#fff',
                                    fontWeight: 'normal',
                                    fontSize: 14
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: false
                            }
                        },
                        data: dataList
                    },
                    {
                        name: '噪声占比',
                        type: 'pie',
                        radius: ['50%', '52%'],
                        center: ['50%', '60%'],
                        label: {
                            normal: {
                                formatter: '{b|{b}}\n{d|{d}%}',
                                rich: {
                                    b: {
                                        fontSize: 14,
                                        color: '#fff',
                                        align: 'left',
                                        padding: 4
                                    },
                                    hr: {
                                        borderColor: '#12EABE',
                                        width: '100%',
                                        borderWidth: 2,
                                        height: 0
                                    },
                                    d: {
                                        fontSize: 12,
                                        color: '#fff',
                                        align: 'left',
                                        padding: 4
                                    },
                                    c: {
                                        fontSize: 14,
                                        color: '#fff',
                                        align: 'center',
                                        padding: 4
                                    }
                                }
                            }
                        },
                        labelLine: {
                            normal: {
                                show: true,
                                length: 20,
                                length2: 20,
                                lineStyle: {
                                    type: 'dashed',
                                    width: 2
                                }
                            }
                        },
                        data: dataList
                    }
                    ]
                }
                const myChart = this.$echarts.init(document.getElementById("contentchart"));
                myChart.setOption(option);
                //随着屏幕大小调节图表
                window.addEventListener("resize", () => {
                    myChart.resize();
                });
            })
        },
        // 噪声线索
        contentCountM() {
            contentCount().then(res => {
                // console.log(res.data);
                this.contentData = res.data
                for (var i in this.contentData) {
                    this.contentAllNum += this.contentData[i]
                }
            })
        },
        // 噪声数量统计
        addressCountM() {
            addressCount({
                area: this.areaName
            }).then(res => {
                let valueList = []
                let xLabel = []
                for (var i = 0; i <= res.data.length; i++) {
                    if (res.data[i]) {
                        valueList.push(res.data[i].count)
                        xLabel.push(res.data[i].name)
                    }
                }
                console.log(xLabel);
                const option = {
                    tooltip: {},
                    animation: false,
                    grid: {
                        top: "25%",
                        bottom: "25%"//也可设置left和right设置距离来控制图表的大小
                    },
                    xAxis: {
                        data: xLabel,
                        axisLine: {
                            show: true, //隐藏X轴轴线
                            lineStyle: {
                                color: '#11417a'
                            }
                        },
                        axisTick: {
                            show: false //隐藏X轴刻度
                        },
                        axisLabel: {
                            show: true,
                            interval: 0,
                            margin: 0,
                            fontSize: 12,
                            textStyle: {
                                color: "#A3C0DF" //X轴文字颜色
                            },
                            formatter: function (params) {
                                var str = "";                 // 最终拼接成的字符串
                                var paramsLen = params.length;// 获取每项文字的个数
                                var len = 11;                  // 每行能显示的字的个数（根据实际情况自己设置）
                                var rowNumber = Math.ceil(paramsLen / len); // 换行的话，需要显示几行，向上取整
                                if (paramsLen > len) {        //大于设定的len就换行，不大于就不变化
                                    for (var i = 0; i < rowNumber; i++) {
                                        var temp = "";            // 表示每一次截取的字符串
                                        var start = i * len;      // 开始截取的位置
                                        var end = start + len;    // 结束截取的位置
                                        if (i == rowNumber - 1) { // 最后一次不换行
                                            temp = params.substring(start, paramsLen);
                                        } else {                  // 每一次拼接字符串并换行
                                            temp = params.substring(start, end) + "\n";
                                        }
                                        str += temp;              // 最终拼成的字符串
                                    }
                                } else {                      // 给新的字符串赋值
                                    str = params;
                                }
                                return str;                   //返回字符串
                            }
                        },

                    },
                    yAxis: [
                        {
                            type: "value",
                            gridIndex: 0,
                            interval: 25,
                            // splitNumber: 4,
                            splitLine: {
                                show: true,
                                lineStyle: {
                                    color: '#113763',
                                    width: 1
                                },
                            },
                            axisTick: {
                                show: false
                            },
                            axisLine: {
                                show: true,
                                lineStyle: {
                                    color: '#11417a'
                                }
                            },
                            axisLabel: {
                                show: true,
                                margin: 14,
                                fontSize: 14,
                                textStyle: {
                                    color: "#A3C0DF" //X轴文字颜色
                                }
                            },
                        },
                    ],
                    series: [
                        {
                            name: "主营业务",
                            type: "bar",
                            barWidth: 20,
                            itemStyle: {
                                normal: {
                                    color: this.$echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                                        offset: 0,
                                        color: "#07ecd9"
                                    },
                                    {
                                        offset: 1,
                                        color: "#034881"
                                    }
                                    ])
                                }
                            },
                            data: valueList,
                            z: 10,
                            zlevel: 0,
                            "label": {
                                "show": true,
                                "position": "top",
                                "distance": 10,
                                fontSize: 16,
                                "color": "#01fff4"
                            }
                        },
                        {
                            // 分隔
                            type: "pictorialBar",
                            itemStyle: {
                                normal: {
                                    color: "#0F375F"
                                }
                            },
                            symbolRepeat: "fixed",
                            symbolMargin: 6,
                            symbol: "rect",
                            symbolClip: true,
                            symbolSize: [20, 2],
                            symbolPosition: "start",
                            symbolOffset: [0, -1],
                            // symbolBoundingData: this.total,
                            data: valueList,
                            width: 25,
                            z: 0,
                            zlevel: 1,
                        },
                    ]
                }
                const myChart = this.$echarts.init(document.getElementById("addresschart"));
                myChart.setOption(option);
                //随着屏幕大小调节图表
                window.addEventListener("resize", () => {
                    myChart.resize();
                });
            })
        },
        // 噪声报警时间分类
        timeCountM() {
            console.log(parseTime(this.timePick, '{y}-{m}'));
            timeCount({
                time: parseTime(this.timePick, '{y}-{m}')
            }).then(res => {

                let dataList = []
                let xAxisList = []
                let maxValue = 0
                let maxXAxis = 0

                for (var i = 0; i <= res.data.length; i++) {
                    if (res.data[i]) {
                        if (Number(res.data[i].count) > maxValue) {
                            maxValue = res.data[i].count
                            maxXAxis = i
                        }
                        dataList.push(res.data[i].count)
                        xAxisList.push(res.data[i].name.slice(5, 10))
                    }
                }
                // 基本柱状图
                const option = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        top: '20%',
                        left: '6%',
                        right: '4%',
                        bottom: '12%',
                        containLabel: true
                    },
                    // toolbox: {
                    //     feature: {
                    //         saveAsImage: {}
                    //     }
                    // },
                    // dataZoom: [
                    //     {
                    //         show: true,
                    //         realtime: true,
                    //         start: 30,
                    //         end: 70,
                    //         xAxisIndex: [0, 1]
                    //     },
                    //     {
                    //         type: 'inside',
                    //         realtime: true,
                    //         start: 30,
                    //         end: 70,
                    //         xAxisIndex: [0, 1]
                    //     }
                    // ],
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,//坐标轴两边留白
                        data: xAxisList,
                        axisTick: {//坐标轴刻度相关设置。
                            show: false,
                        },
                        axisLine: {//坐标轴轴线相关设置
                            lineStyle: {
                                color: '#E5E9ED',
                                // opacity:0.2
                            }
                        },
                        axisLabel: {
                            interval: 0,
                            rotate: 45,
                            margin: 10,
                            textStyle: {
                                color: '#a8aab0',
                                fontStyle: 'normal',
                                fontFamily: '微软雅黑',
                                fontSize: 12,
                            }
                        },
                        splitLine: { //坐标轴在 grid 区域中的分隔线。
                            show: false,
                            lineStyle: {
                                color: '#E5E9ED',
                                // 	opacity:0.1
                            }
                        }
                    },
                    yAxis: [
                        {
                            type: 'value',
                            splitNumber: 5,
                            axisLabel: {
                                textStyle: {
                                    color: '#a8aab0',
                                    fontStyle: 'normal',
                                    fontFamily: '微软雅黑',
                                    fontSize: 12,
                                }
                            },
                            axisLine: {
                                show: false
                            },
                            axisTick: {
                                show: false
                            },
                            splitLine: {
                                show: false,
                                lineStyle: {
                                    color: '#E5E9ED',
                                    // 	opacity:0.1
                                }
                            }

                        }
                    ],
                    series: [
                        {
                            name: '噪声报警',
                            type: 'line',
                            markPoint: {
                                coord: [0, 0],
                                data: [
                                    { name: '最高', value: maxValue, xAxis: maxXAxis, yAxis: maxValue }
                                ],
                                symbolSize: 40,
                                label: {
                                    show: true,
                                    color: '#fff'
                                },
                            },
                            itemStyle: {
                                normal: {
                                    color: 'rgba(255,80,124,1)',
                                    lineStyle: {
                                        color: "rgba(255,80,124,1)",
                                        width: 1
                                    },
                                    areaStyle: {
                                        color: this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                                            offset: 0,
                                            color: 'rgba(255,80,124,0)'
                                        }, {
                                            offset: 1,
                                            color: 'rgba(255,80,124,0.35)'
                                        }]),
                                    }
                                }
                            },
                            data: dataList
                        }
                    ]
                }
                const myChart = this.$echarts.init(document.getElementById("timechart"));
                myChart.setOption(option);
                //随着屏幕大小调节图表
                window.addEventListener("resize", () => {
                    myChart.resize();
                });
            })
        },
        mapInit() {
            areaCount().then(res => {
                // console.log(res.data);
                let that = this
                this.areaList = res.data
                this.$echarts.registerMap('baotou', baotou)
                let myCharts = this.$echarts.init(document.getElementById('map'))
                this.initEcharts();
                var geoCoordMap = {

                };
                for (var i in baotou.features) {
                    geoCoordMap[baotou.features[i].properties.name] = baotou.features[i].properties.center
                }
                // let data = [
                //     { name: '东河区', value: 100 },
                //     { name: '昆都仑区', value: 10 },
                //     { name: '青山区', value: 20 },
                //     { name: '石拐区', value: 30 },
                //     { name: '白云鄂博矿区', value: 40 },
                //     { name: '九原区', value: 41 },
                //     { name: '土默特右旗', value: 15 },
                //     { name: '固阳县', value: 15 },
                //     { name: '达尔罕茂明安联合旗', value: 25 },
                // ];


                let data = []
                let lineList = []
                for (let i in baotou.features) {
                    for (let a in that.areaList) {
                        if (that.areaList[a].name == baotou.features[i].properties.name) {
                            console.log(that.areaList[a].name);
                            data.push({
                                name: that.areaList[a].name,
                                value: that.areaList[a].count,
                            })
                            lineList.push(// 线的样式
                                {
                                    type: "lines",
                                    coordinateSystem: "geo",
                                    zlevel: 5,
                                    label: {
                                        show: true,
                                        position: "start",
                                        formatter: function (params) {
                                            //文本提示框
                                            return (
                                                "\n\n{title|" + that.areaList[a].name + "}\n{value|" + that.areaList[a].count + "}"
                                            );
                                        },
                                        width: 100,
                                        height: 100,
                                        rich: {
                                            //标题样式
                                            title: {
                                                // height: 50,
                                                width: 100,
                                                align: "center",
                                                lineHeight: 20,
                                                fontSize: 14,
                                                color: "#fff",
                                            },
                                            value: {
                                                //内容样式
                                                // height: 50,
                                                width: 100,
                                                lineHeight: 20,
                                                fontSize: 14,
                                                color: "#fff",
                                                align: "center",
                                            },
                                        },
                                    },
                                    data: [
                                        {
                                            coords: [
                                                baotou.features[i].properties.destination, // 终点
                                                baotou.features[i].properties.center, // 起点
                                            ],
                                            lineStyle: {
                                                normal: {
                                                    type: [3, 5],
                                                    // dashOffset: 5,
                                                    show: true,
                                                    width: 2, //尾迹线条宽度
                                                    opacity: 1, //尾迹线条透明度
                                                    curveness: 0, //尾迹线条曲直度
                                                    color: "#16cfd9", // 飞线颜色
                                                },
                                                color: "#16cfd9",
                                            },
                                        }
                                    ]
                                })
                            continue;
                        }
                    }
                }
                console.log(lineList);


                var option = {
                    tooltip: {
                        formatter: function (e, t, n) {
                            console.log(e, t, n);
                            return e.name?(e.name + "：" + e.value):null
                        }
                    },
                    visualMap: {
                        min: 0,
                        max: 1000,
                        left: 26,
                        bottom: 40,
                        showLabel: !0,
                        // text: ["高", "低"],
                        color: '#fff',
                        textStyle: {
                            color: '#fff',
                        },
                        pieces: [
                            { gte: 3000, color: '#032af5' }, // 不指定 max，表示 max 为无限大（Infinity）。
                            { gte: 2000, lte: 2999, color: '#035cf5' }, // 不指定 max，表示 max 为无限大（Infinity）。
                            { gte: 1000, lte: 1999, color: '#3375e4' },
                            { gte: 500, lte: 999, color: '#6797ef' },
                            { gte: 100, lte: 499, color: '#96b5ef' },
                            { gte: 10, lte: 99, color: '#bacae8' },
                            { lte: 9, color: '#d1d4da' }          // 不指定 min，表示 min 为无限大（-Infinity）。
                        ],
                        show: !0
                    },
                    geo: {
                        map: "baotou",
                        // roam: !2,
                        scaleLimit: {
                            min: 1,
                            max: 5
                        },
                        roam: true, //是否可缩放
                        zoom: 1.3,
                        top: 120,
                        center: [110.143453, 40.716739],
                        label: {
                            show: false,
                            // normal: {
                            //     show: !0,
                            //     fontSize: "14",
                            //     color: "rgba(0,0,0,0.7)"
                            // }
                        },
                        itemStyle: {
                            show: false,
                            normal: {
                                //shadowBlur: 50,
                                //shadowColor: 'rgba(0, 0, 0, 0.2)',
                                borderColor: "rgba(0, 0, 0, 0.2)"
                            },
                            emphasis: {
                                areaColor: "#f2d5ad",
                                shadowOffsetX: 0,
                                shadowOffsetY: 0,
                                borderWidth: 0
                            }
                        }
                    },
                    series: [{
                        name: "确诊病例",
                        type: "map",
                        geoIndex: 0,
                        data: data
                    }].concat(lineList)
                }
                // AMap.plugin('AMap.Weather', function () {
                //     //创建天气查询实例
                //     var weather = new AMap.Weather();

                //     //执行实时天气信息查询
                //     weather.getLive('呼和浩特', function (err, data) {
                //         // console.log('err', err);
                //         console.log('天气', data);
                //         that.weatherdata = data
                //         console.log(that.weatherdata);
                //     });
                // });
                myCharts.setOption(option)
            });

        },
        dateTime() {
            this.timeFormate();
            setTimeout(() => {
                this.dateTime();
            }, 1000);
        },
        timeFormate() {
            const newtime = new Date();
            this.time.hour = this.getIncrease(newtime.getHours(), 2);
            this.time.minitus = this.getIncrease(newtime.getMinutes(), 2);
            this.time.seconds = this.getIncrease(newtime.getSeconds(), 2);
            this.nowTime =
                this.getIncrease(newtime.getFullYear(), 4) +
                "年" +
                this.getIncrease(newtime.getMonth() + 1, 2) +
                "月" +
                this.getIncrease(newtime.getDate(), 2) +
                "日 " +
                this.week[newtime.getDay()];
            return `${this.time.hour}:${this.time.minitus}:${this.time.seconds}`;
        },
        getIncrease(num, digit) {
            var increase = "";
            for (var i = 0; i < digit; i++) {
                increase += "0";
            }
            return (increase + num).slice(-digit);
        },
        formatToPrice(value) {//使用tofixed（0）限制跳动的小数位数
            return `<h3>${Number(value).toFixed(0)}</h1>`;
        },
        initEcharts() {
            // 基本柱状图
            console.log(this.areaList);
            let dataList = []
            let valueList = []
            let max = 0
            for (var i = 0; i <= this.areaList.length; i++) {
                if (this.areaList[i]) {
                    if (Number(this.areaList[i].count) > max) {
                        max = this.areaList[i].count
                    }
                }
            }

            for (var i = 0; i <= this.areaList.length; i++) {
                if (this.areaList[i]) {

                    dataList.push(
                        {
                            max: max,
                            name: this.areaList[i].name,
                        }
                    )
                    valueList.push(this.areaList[i].count)
                }
            }
            console.log(dataList);
            const option = {
                tooltip: {},
                radar: {
                    radius: "60%", //大小
                    nameGap: 20, // 图中工艺等字距离图的距离
                    center: ["50%", "50%"], // 图的位置
                    name: {
                        textStyle: {
                            color: "rgba(101, 213, 255, 1)",
                            fontSize: 12
                        },
                        formatter: function (name) {
                            return name;
                        }
                    },
                    indicator: dataList,
                    axisLine: {
                        lineStyle: {

                            color: "rgba(153, 209, 246, 0.2)"
                        }
                    },
                    splitArea: {
                        show: false,
                        areaStyle: {
                            color: "rgba(255,0,0,0)" // 图表背景的颜色
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            width: 1,
                            color: "rgba(153, 209, 246, 0.2)" // 设置网格的颜色
                        }
                    }
                },

                series: [
                    {
                        name: "事发地检察院",
                        type: "radar",
                        symbol: "angle",
                        itemStyle: {
                            normal: {
                                areaStyle: { type: "default" }
                            }
                        },
                        data: [
                            {
                                symbol: "circle",
                                symbolSize: 5,
                                value: valueList,
                                areaStyle: { color: "rgba(64, 205, 241, 0.2)" },
                                itemStyle: {
                                    normal: {
                                        borderWidth: 1,
                                        color: "RGBA(0, 34, 66, 1)",
                                        borderColor: "rgba(146, 225, 255, 1)"
                                    }
                                },
                                lineStyle: {
                                    color: "rgba(146, 225, 255, 1)",
                                    width: 1
                                }
                            }
                        ],
                    },
                    {
                        name: '辅助线',
                        type: 'lines',
                        lineStyle: {
                            color: '#000',
                            type: 'solid',
                            width: 1,
                        },
                    }
                ]
            }
            const myChart = this.$echarts.init(document.getElementById("numchart"));
            myChart.setOption(option);
            //随着屏幕大小调节图表
            window.addEventListener("resize", () => {
                myChart.resize();
            });
        },
        // 实时动态
        getDynamic() {
            // 这里也可以请求后台数据
            this.$nextTick(() => {
                this.totalHeight = '-' + this.$refs.box.offsetHeight + 'px';
                const boxHeight = this.$refs.box.offsetHeight; //内容高度
                this.handleStpe(boxHeight);
                this.addKeyFrames(this.totalHeight);
            });
        },
        // 设置滚动速度，动画效果
        handleStpe(boxHeight) {
            this.rowup = {
                ' -webkit-animation': '70s rowup linear infinite',
                animation: `${Math.floor(
                    (boxHeight * 1000) / this.timer
                )}ms rowup linear infinite`,
                position: 'relative'
            };
        },
        // 跑马灯
        addKeyFrames(y) {
            const style = document.createElement('style');
            style.type = 'text/css';
            const keyFrames = `\
    @-webkit-keyframes rowup {\
        0% {\
            -webkit-transform: translate3d(0, 0, 0);\
            transform: translate3d(0, 0, 0);\
        }\
        100% {\
            -webkit-transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
            transform: translate3d(0, A_DYNAMIC_VALUE, 0);\
        }\
    }`;
            style.innerHTML = keyFrames.replace(/A_DYNAMIC_VALUE/g, y);
            document.getElementsByTagName('head')[0].appendChild(style);
        },
        // 停止动画
        Stop() {
            this.openAnim = !this.openAnim;
        },
        // 开始动画
        Up() {
            this.openAnim = true;
        }
    },

}
</script>
<style lang="scss">
.bigScreen {
    // background-color: #002a68;
    background: url("./assets/bg.png");
    width: 100vw;
    height: 100vh;
    background-size: 100% 100%;
    .vh-c {
        display: flex;
        justify-content: center;
        align-items: center;
    }
    .vh-cb {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .toptitle {
        background: url("./assets/header.png");
        width: 100%;
        height: 9vh;
        background-size: 100% 100%;
        padding: 20px;
        display: flex;
        justify-content: space-between;
        // align-items: flex-end;
        font-size: 16px;
        font-weight: 400;
        color: #19f7ff;
        // line-height: 69px;
        .title {
            color: #ffffff;

            font-size: 26px;
            font-weight: 600;
        }
    }
    .contentBox {
        padding: 1vh 1vw;
        // background-color: antiquewhite;
        height: 90vh;
        .top {
            display: flex;
            justify-content: space-between;
            height: 90vh;
            .map {
                div {
                    // height: 1vh !important;
                    border: #fff !important;
                    // background-color: rgba(255, 255, 255, 0.5);
                }
            }

            .titlemod {
                font-size: 1.2rem;
                font-weight: 500;
                color: #16cfd9;
                // line-height: 4.2vh;
                padding: 0.5rem 1vw 0 1.5vw;
                white-space: nowrap;
                input {
                    color: #16cfd9 !important;
                    border: #00daff 1px solid !important;
                    background-color: transparent !important;
                }
            }
            .left {
                // background-color: wheat;
                width: 30%;
                .ltopBox {
                    height: 49%;
                    display: flex;
                    justify-content: space-between;
                    .box {
                        // background: url("../../assets/sbgl.png");
                        width: 100%;
                        height: 99%;
                        background-size: 100% 100%;
                    }
                }
                .lbottomBox {
                    height: 50%;
                    display: flex;
                    align-items: flex-end;
                    justify-content: space-between;
                    font-size: 1rem;
                    color: #00daff;
                    font-family: PingFang SC;
                    font-weight: bold;
                    // line-height: 30%;
                    .box {
                        // background: url("../../assets/sbg.png");
                        width: 100%;
                        height: 99%;
                        background-size: 100% 100%;
                        .bottomBox {
                            margin: 0 auto;
                            width: 90%;
                            padding: 1vh 0;
                            height: calc(100% - 5vh);
                            .item {
                                // height: 30%;
                                height: 2rem;
                                img {
                                    width: 0.8vw;
                                    height: 1.8vh;
                                }
                                .itemtitle {
                                    width: 3vw;
                                    white-space: nowrap;
                                }
                                .scheduleBox {
                                    width: 80%;
                                    height: 1vh;
                                    .schedule {
                                        height: 1vh;
                                        background: linear-gradient(
                                            to right,
                                            rgba(24, 236, 245, 0),
                                            #18ecf5
                                        );
                                    }
                                }
                                .num {
                                    width: 3vw;
                                    white-space: nowrap;
                                }
                            }
                        }
                    }
                    .title {
                        font-size: 1.2rem;
                        font-weight: 500;
                        color: #16cfd9;
                        line-height: 4.6vh;
                        padding: 0.5rem 1vw 0 1.5vw;
                        white-space: nowrap;
                    }
                }
                .title {
                    font-size: 1.2rem;
                    font-weight: 500;
                    color: #16cfd9;
                    line-height: 4.2vh;
                    padding: 0.5rem 1vw 0 1.5vw;
                    white-space: nowrap;
                }
                .titleright {
                    font-size: 0.8rem;
                    font-weight: 500;
                    color: #16cfd9;
                    line-height: 4.2vh;
                    // padding: 0.5rem 1vw 0 1.5vw;
                    white-space: nowrap;
                    // font-family:electronicFont;
                }
                .titlesmall {
                    font-size: 0.7rem;
                    font-weight: 500;
                    color: #16cfd9;
                    line-height: 3vh;
                    padding: 0.5rem 1vw 0 1.5vw;
                    white-space: nowrap;
                    // font-family:electronicFont;
                }
                .numberBox {
                    height: 7vh;
                    width: 90%;
                    margin: 0 auto;
                    div {
                        // background-color: #16cfd9;
                        width: 17%;
                        height: 100%;
                        background-size: 100% 100% !important;
                        display: flex;
                        justify-content: center;
                        align-items: center;
                        padding-bottom: 1vh;
                        color: #16cfd9;
                        font-family: electronicFont;
                        font-weight: bold;
                        font-size: 2vw;
                        // background: url("../../assets/nums.png");
                    }
                }
            }
            .map {
                width: 40%;
                padding: 20px;
                // background-color: #19f7ff;
                // div {
                //     width: 100%;
                //     height: 100% !important;
                // }
            }
            .right {
                width: 30%;
                // background-color: wheat;
                .bottombox,
                .topbox {
                    // background: url("../../assets/dbg.png");
                    width: 100%;
                    height: 49.5%;
                    background-size: 100% 100%;
                }
                .topbox {
                    margin-bottom: 1%;
                }
                .cardbox {
                    overflow: hidden;
                    padding: 0 1vw;
                    .card {
                        width: 25%;
                        height: 10vh;
                        float: left;
                        // margin: 0.3vw !important;
                        // background-color: #16cfd9;
                        .cardin {
                            width: 100%;
                            .cardtitle {
                                width: 100%;
                                color: #16cfd9;
                                font-weight: bold;
                                font-size: 0.8vw;
                                margin-bottom: 0.5vh;
                            }
                            .cardnumber {
                                color: #16cfd9;
                                width: 100%;
                                height: 6vh;
                                font-family: electronicFont;
                                font-weight: bold;
                                font-size: 2vw;
                                padding-bottom: 1vh;
                                background-size: 100% 100% !important;
                                // background: url("../../assets/numb.png");
                                letter-spacing: 0.1vw;
                            }
                        }
                    }
                }
            }
        }
    }
    .bottombox {
        // background: url("../../assets/bottombg.png");
        background-size: 100% 100%;
        width: 100%;
        height: 35vh;
        width: calc(100vw - 40px);
        margin: 0 auto;
        .titlebox {
            background-color: rgba(43, 138, 255, 0.2);
            color: #19f7ff;
            width: 98%;
            padding: 0.5vh 0;
            margin: 0 auto;
        }
        .table {
            padding: 0.5vh 0;
            width: 100%;
            div {
                display: flex;
                justify-content: center;
                align-items: center;
            }
            div:nth-child(1) {
                width: 4vw;
            }
            div:nth-child(2) {
                width: 4vw;
            }
            div:nth-child(3) {
                width: 4vw;
            }
            div:nth-child(4) {
                width: 4vw;
            }
            div:nth-child(5) {
                width: 4vw;
            }
            div:nth-child(6) {
                width: 7vw;
            }
            div:nth-child(7) {
                width: 7vw;
            }
            div:nth-child(8) {
                width: 7vw;
            }
            div:nth-child(9) {
                width: 4vw;
            }
            div:nth-child(10) {
                width: 7vw;
            }
            div:nth-child(11) {
                width: 4vw;
            }
            div:nth-child(12) {
                width: 7vw;
            }
            div:nth-child(13) {
                width: 7vw;
            }
            div:nth-child(14) {
                width: 6vw;
            }
        }

        .boxtitle {
            font-size: 1.2rem;
            font-weight: 500;
            color: #16cfd9;
            line-height: 5vh;
            padding: 0 1vw 0 2vw;
            white-space: nowrap;
            margin-bottom: 1.5vh;
        }

        .bs_scroll_content {
            width: 98%;
            margin: 0 auto;
            height: 20vh;
            overflow: hidden;
            // background: #fff;
            // border: 1px solid #ccc;
            border-radius: 6px;
            overflow: hidden;
        }

        .bs-content {
            position: relative;
            overflow: hidden;
            transition: all 0ms ease-in 0s;
        }

        //静态页面的动画，不能根据数据的多少调整滚动的速度，如果是固定数据量可以这样写
        // .bs_scroll_content .rowup {
        //   // -webkit-animation: 1000s rowup linear infinite;
        //   // animation: 1000s rowup linear infinite;
        //   position: relative;
        // }

        .active {
            animation-play-state: running !important;
        }
        .paused {
            animation-play-state: paused !important;
        }

        .itemStyle {
            height: 100%;
            // line-height: 40px;
            // padding-left: 24px;
            overflow: hidden;
            color: #7690a2;

            // border-bottom: 1px solid #ccc;
        }
    }
    .footerBox {
        // background: url("../../assets/bsbottom.png");
        background-size: 100% 100%;
        height: 2vh;
        width: 70%;
        margin: 1vh auto;
        font-size: 0.5vw;
        font-weight: bold;
        color: #13a2ad;
    }
    .border-box-content {
        padding: 10px 20px 0;
    }
}
</style>

